<template>
  <div class="page" id="project">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @cell-click="cellClick"
      size="small"
    >
      <el-table-column prop="name" label="项目名称" width="180" />
      <el-table-column prop="path" label="地址" />
      <el-table-column label="标星">
        <template #default="scope">
          <el-rate v-model="scope.row.rate" />
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="160">
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            @click.prevent="handleClick('del', scope.$index)"
            >移除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleClick('up', scope.$index)"
            >上移</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="handleClick('down', scope.$index)"
            >下移</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import service from "../../common/api.js";
var res;
export default {
  data() {
    return {
      tableData: [],
    };
  },
  watch: {
    tableData: {
      handler(newValue, oldValue) {
        window.project = newValue;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    var th = this;
    Object.assign(this, { service });
    setTimeout(() => {
      var app = document.querySelector("#project");
      app.ondragenter = app.ondragleave = app.ondragover = () => {
        return false;
      };
      app.ondrop = function (event) {
        var files = event.dataTransfer.files;
        for (var i = 0; i < files.length; i++) {
          var { path, type, name } = files[i];
          if (!type && name) {
            th.tableData.push({ name, path, rate: 0 });
          }
        }
      };
    }, 1000);
  },
  methods: {
    async cellClick(row, column, cell, event) {
      console.log(row, column, cell, event);
      var exec = "";
      if (column.property == "name")  exec = `code ${row.path}`;
      if (column.property == "path")  exec = `start ${row.path}`; 
      service.post("/system/api/system", { exec });
    },
    handleClick(type, arg) {
      var tmp = [...this.tableData];
      switch (type) {
        case "del":
          return this.tableData.splice(arg, 1);
        case "up":
          if (arg > 0) {
            tmp[arg] = this.tableData[arg - 1];
            tmp[arg - 1] = this.tableData[arg];
            this.tableData = tmp;
          }
          return;
        case "down":
          if (arg < this.tableData.length - 1) {
            tmp[arg] = this.tableData[arg + 1];
            tmp[arg + 1] = this.tableData[arg];
            this.tableData = tmp;
          }
          return;
      }
    },
  },
};
</script>
<style scoped>
.page {
  padding: 10px;
  height: calc(100vh - 100px);
  cursor: pointer;
  overflow: auto;
}
</style>
